<template>
	<div>
    <Card>
      <p slot="title">
        提币管理
        <Button type="primary" size="small" @click="refreshPageManual">
          <Icon type="refresh"></Icon>刷新
        </Button>
      </p>
      <Row class="functionWrapper">
        <div class="searchWrapper clearfix">
					<div class="poptip">
						<Poptip trigger="hover" content="请输入用户名、邮箱、手机号、姓名搜索" placement="bottom-start">
							<Input placeholder="请输入用户名、邮箱、手机号、姓名搜索"
										v-model="filterSearch.account"
										style="width: 300px"/>
							</Input>
						</Poptip>
					</div>

					<div class="poptip">
						<span>提币状态：</span>
						<Select v-model="filterSearch.commonStatus">
							<Option v-for="item in withdrawStatusArr"
										:value="item.status"
										:key="item.status">{{ item.text }}</Option>
						</Select>
					</div>

					<div class="btns">
						<Button type="info" size="small" @click="searchByFilter">搜索</Button>
					</div>

        </div>
      </Row>

      <Row class="margin-top-10 searchable-table-con1">
          <Table
            :columns="columns_first"
            :data="withdrawpage"
            border
            :loading="ifLoading"
            ref="tabel"
            class='user_center'>
          </Table>
      </Row>

      <Row class="pageWrapper" >
        <Page :total="totalNum" style='margin-top:8px' :current="currentPageIdx"   @on-change="changePage" show-elevator></Page>
      </Row>
    </Card>

  </div>
</template>

<script>

import { setStore, getStore, removeStore } from '@/config/storage';
import { withdrawManage } from '@/service/getData';

export default {
  data () {
    return {
			currentPageIdx: 1,
			filterSearch: {
				account: '',
				commonStatus: ''
			},
			withdrawStatusArr: [
				{ status: 0, text: '未审核' },
				{ status: 1, text: '完成' },
				{ status: 2, text: '失败' },
			],
      totalNum: null,
      ifLoading: true,
      usemmuber:'',
      pageIndex:1,
      loading:true,
      columns_first: [
        {
          type: 'selection',
          width: 60
        },
        {
          title: '交易编号',
          key: 'transactionNumber'
        },
        {
          title: '会员名称',
          key: 'username'
        },
        {
          title: '提币金额',
          key: 'balance'
        },
        {
          title: '提币时间',
          key: 'createTime'
				},
        {
          title: '更新时间',
          key: 'updateTime'
				},
        {
          title: '状态',
          width:90,
          key: 'state',
          render: (h, obj) => {
            let  userState = obj.row.state;
            let stateTxt = null;
            if(userState === 0) {
              stateTxt = '未审核';
            } else if (userState === 1) {
              stateTxt = '完成';
            } else {
              stateTxt = '失败';
            }
            return h('span', {
            },stateTxt);
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 150,
          fixed: 'right',
          align: 'center',
          render: (h, obj) => {
						return h('div', {
						}, [
							h('Button', {
								props: {
									type: 'info',
									size: 'small',
								},
								on: {
									click: () => {
										removeStore('transactionNumber');
										setStore('transactionNumber', obj.row.transactionNumber);
										this.$router.push('/finace/WithdrawDetail');
									}
								}
							}, '查看')
						])

          }
        }
      ],
      withdrawpage: []
    }
  },
  methods: {
    refreshPageManual() {
    for(let val in this.filterSearch)  {
			this.filterSearch[val] = '';
		}
		this.currentPageIdx = 1;
      this.refreshPage({ pageNo: 1, pageSize: 10, property: 'createTime', direction: 1 });
    },
    searchByFilter(){
			this.$store.commit('switchLoading', true);
      withdrawManage(this.filterSearch)
      .then( res => {
        if (!res.code) {
          this.ifLoading = false;
          this.withdrawpage = res.data.content;
					this.totalNum = res.data.totalElements;
					this.$store.commit('switchLoading', false);
        }else console.log(this.$Message.error(res.message))
			})
			.catch(err => console.log(err))
    },

    changePage(pageIndex) {
      this.currentPageIdx = pageIndex;
			this.ifLoading = true;
			let obj =Object.assign({ pageNo: pageIndex, pageSize: 10, property: 'createTime', direction: 1 }, this.filterSearch);
      this.refreshPage(obj);
    },
    refreshPage(obj = {}) {
			this.ifLoading = true;
      withdrawManage(obj)
      .then( res => {
        if (!res.code) {
          this.ifLoading = false;
          this.withdrawpage = res.data.content;
          this.totalNum = res.data.totalElements;
        }
      })
		}
  },
  created() {
    this.refreshPage({  property: 'createTime', direction: 1 });
  },
  // watch: {
  //   // account( newval, oldVal ) {
  //   //   if(!String(newval).length ) {
  //   //     this.refreshPage({  property: 'createTime', direction: 1 });
  //   //   }
  //   // }
  // }
}
</script>

<style lang="less" scoped>
  .search-mask{
    position: absolute;
    z-index: 8888;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .2);
  }
</style>
